<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<template>
  <div class="flowable layout">
    <BoxZoom @on-rate="handleRate" />
    <ZoomBox :snum="zoomNumber">
      <NodeBox isStart>
        <Item @on-set="handleItemSet" item="{a:1}" :isActive="isActive"></Item>
        <Btns />
      </NodeBox>
      <BranchBox>
        <BranchCol isStart>
          <BoxCondition>
            <ItemCondition @on-set="handleItemSet" item="{a:1}" :isActive="isActive"></ItemCondition>
            <Btns />
          </BoxCondition>
          <NodeBox>
            <Item name="todo" @on-set="handleItemSet" item="{a:1}" :isActive="isActive"></Item>
            <Btns />
          </NodeBox>
          <BranchBox>
            <BranchCol isStart>
              <BoxCondition>
                <ItemCondition @on-set="handleItemSet" item="{a:1}" :isActive="isActive"></ItemCondition>
                <Btns />
              </BoxCondition>
              <NodeBox>
              <Item name="todo" @on-set="handleItemSet" item="{a:1}" :isActive="isActive"></Item>
              <Btns />
            </NodeBox>
            </BranchCol>
            <BranchCol isEnd>
              <BoxCondition>
                <ItemCondition @on-set="handleItemSet" item="{a:1}" :isActive="isActive"></ItemCondition>
                <Btns />
              </BoxCondition>
              <NodeBox>
            <Item name="todo" @on-set="handleItemSet" item="{a:1}" :isActive="isActive"></Item>
            <Btns />
          </NodeBox>
            </BranchCol>
          </BranchBox>
          <NodeBox isStart>
        <Btns />
      </NodeBox>
        </BranchCol>
        <BranchCol isEnd>
          <BoxCondition>
            <ItemCondition @on-set="handleItemSet" item="{a:1}" :isActive="isActive"></ItemCondition>
            <Btns />
          </BoxCondition>
          <NodeBox>
            <Item name="todo" @on-set="handleItemSet" item="{a:1}" :isActive="isActive"></Item>
            <Btns />
          </NodeBox>
        </BranchCol>
      </BranchBox>
      <NodeBox isStart>
        <Btns />
      </NodeBox>
      <NodeEnd />
    </ZoomBox>
  </div>
</template>

<script>
import BoxZoom from './canvans/BoxZoom.vue'
import Item from './node/Item.vue'
import { Btns, NodeBox, NodeEnd } from './node/index'
import { BranchBox, BranchCol, BoxCondition, ItemCondition } from './branch'
import ZoomBox from './canvans/ZoomBox.vue'
export default {
  components: {
    BoxZoom,
    Item,
    Btns,
    NodeBox,
    ZoomBox,
    NodeEnd,
    BranchBox,
    BranchCol,
    BoxCondition,
    ItemCondition
  },
  data() {
    return {
      isActive: false,
      zoomNumber: 1
    }
  },
  methods: {
    handleItemSet(e, item) {
      this.isActive = true
      console.log(e, item)
    },
    handleRate(rate) {
      this.zoomNumber = rate / 100
      console.log(this.zoomNumber)
    }
  }
}
</script>

<style lang="scss" scoped>
$bgColor: #f5f5f7;
.flowable {
  // position: absolute;
  // left: 0;
  // top: 50px;
  // bottom: 0;
  // right: 0;
  // z-index: 1;
  // overflow: auto;
  background-color: $bgColor;
}
.layout {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-flow: column nowrap;
}

.info {
  width: 220px;
  min-height: 75px;
  background-color: #FFF;
  border-radius: 4px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
  position: relative;
}

</style>
